<template>
  <DialogVue :dialogVisible="dialogVisible" @closeModal="closeModal">
    <div class="header">
      <img src="@img/recharge/Bind-WeChat.png" alt="" />
      <p>微信扫码立即绑定</p>
    </div>
    <div id="code" class="wxcode"></div>
  </DialogVue>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getLoginParam } from "@api/login";
// 弹出框
import DialogVue from "@components/dialog/index.vue";
// 1.创建 script 标签
const scDom = document.createElement("script");
// 2. 引入js文件
scDom.src = "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js";
document.body.appendChild(scDom);
scDom.onload = async () => {
  const res = await getLoginParam();
  if (res.code != 0) return;
  const { redirectUri, appid, scope, state } = res.data;
  new WxLogin({
    id: "code",
    appid,
    scope,
    redirect_uri: decodeURIComponent(redirectUri),
    state,
    href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZX0NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9DQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMwcHg7bWFyZ2luLXRvcDogO2JvcmRlcjogbm9uZTt9DQo=",
  });
};
// 关闭弹窗
const emits = defineEmits(["closeDialog"]);
const dialogVisible = ref(true);
const closeModal = () => {
  dialogVisible.value = false;
  emits("closeDialog");
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: center;
  img {
    width: 18px;
    height: 18px;
  }
  p {
    margin: 0;
    font-size: 19px;
    color: #232323;
    margin-left: 7px;
  }
}
.wxcode {
  display: flex;
  justify-content: center;
}
</style>
